<template>
    <el-form :inline="true" :model="formData" class="demo-form-inline">
        <el-form-item label="父类">
            <CategoryTreeVue v-model:modelValue="formData.categoryId"></CategoryTreeVue>
        </el-form-item>
        <el-form-item label="名称">
            <el-input v-model="formData.name" placeholder="请输入关键字"/>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>
    <el-table :data="tableData" style="width: 100%" ref="productTableRef">
        <el-table-column type="selection" width="55"/>
        <el-table-column fixed prop="id" label="编号" width="80"/>
        <el-table-column fixed prop="name" label="名称" width="120"/>
        <el-table-column prop="img" label="图片" width="120">
            <template #default="scope">
                <img :src="scope.row.img.split(',')[0]" width="50" height="50"/>
            </template>
        </el-table-column>
        <el-table-column prop="statusX" label="状态" width="120"/>

    </el-table>
    <br/>
    <el-pagination background layout="prev, pager, next" :total="pageData.total" :page-size="pageData.pageSize"
                   @current-change="currentChange"/>
    <el-divider/>

    <el-button type="primary" @click="onChecked">确定</el-button>
</template>

<script setup lang="ts">
import {ref, onMounted, reactive} from 'vue'
import {productApi} from '@/api'
import CategoryTreeVue from "@/components/CategoryTree.vue";


defineProps({modelValue: {type: Array, default: []}})
const emit = defineEmits(["update:modelValue"])
const tableData: any = ref([])
const productTableRef = ref()
const pageData = reactive({
    total: 0,
    pageSize: 10,
    pageNum: 1
})
const formData = reactive({
    name: '',
    categoryId: 0
})


onMounted(() => {
    callProductApi()
})


const onChecked = () => {
    emit("update:modelValue", productTableRef.value.getSelectionRows())
}

const onSubmit = () => {
    callProductApi()
}
const callProductApi = () => {
    let name = formData.name === "" ? undefined : formData.name
    let categoryId = formData.categoryId === 0 ? undefined : formData.categoryId
    productApi.select.call({
        categoryId: categoryId,
        status: 1,
        name: name,
        pageNum: pageData.pageNum,
        pageSize: pageData.pageSize
    }).then((res: any) => {
        tableData.value = res.items
        pageData.total = res.total

    })
}

const currentChange = (num: number) => {
    pageData.pageNum = num
    callProductApi()
}
</script>